<template>
  <Row class="setparams">
    <Col span="6">
      <Card title="项目信息" icon="ios-options" bordered  dis-hover style="margin:0 10px;height:400px;">
         <span class="title">名称： </span>
         <p class="label">{{sequence.Name}}</p>
          <span class="title">项目类型： </span>
         <p class="label">{{sequence.Type == 0 ? '校级项目':'院系项目'}}</p>
          <span class="title">填写人： </span>
         <p class="label">{{sequence.Creater}}</p>
         <span class="title">填写时间： </span>
         <p class="label">{{sequence.Ctime | timeFormat}}</p>
        
         <span class="title">简介： </span>
         <p>
           <Tooltip max-width="300" :content="sequence.Remark">
          <p class="label remark" >{{sequence.Remark | textIntercept(20)}}</p>
         </Tooltip>
         </p>
         
      </Card>
    </Col>
    <Col span="18">
      <Card bordered  dis-hover style="margin:0 10px;min-height:400px;" >
          <p slot="title"><Icon type="md-cog" />项目参数设置</p>
          <span slot="extra"><Button type="primary" @click="updateBtnClickedHandler">保存</Button></span>
          <Form label-position="top">
              <FormItem v-for="item in data" :key="item.Id" :label="item.Remark">
                <Row>
                  <Col span="24"> <DatePicker v-model="item.Start" type="date" @on-change="dateChange(item)"  placeholder="Select date"></DatePicker>&nbsp;&nbsp;至&nbsp;&nbsp;<DatePicker @on-change="dateChange(item)" v-model="item.End" type="date" placeholder="Select date" ></DatePicker></Col>
                </Row>
              </FormItem>
          </Form>
          
      </Card>     
    </Col>
  </Row>
</template>

<script>
  import { mapGetters } from 'vuex';
  export default {
    name: 'SetParams',
    data () {
      return {
        data: []
      };
    },
    computed: {
      sequence () {
        return this.$route.params.sequence;
      },
      dateArray: {
        get: function () {
          if (this.data.Start && this.data.End) {
            return [this.data.Start, this.data.End];
          } else {
            return [new Date(), new Date()];
          }
        },
        set: function (newVal) {
          if (Array.isArray(newVal) && newVal.length === 2) {
            this.data.Start = newVal[0];
            this.data.End = newVal[1];
          }
          // this.data.Start = val1;
          // this.data.End = val2;
          // console.log(val1);
        }
      },
      ...mapGetters({
        nav: 'getNav'
      })
    },
    methods: {
      dateChange (item) {
        // console.log(item.Start.getTime());
        if (item.Start.getTime() >= item.End.getTime()) {
          // console.log('起始时间应早于结束时间！');
          this.$Message.warning('起始时间应早于结束时间！');
        }
      },
      computedLabel (rtype) {
        switch (rtype) {
        case 0:
          return '申报截止日期';
        case 1: 
          return '中期检查截止日期';
        case 2: 
          return '项目结题截止日期';
        case 3: 
          return '其他';
        }
      },
      getAll () {
        this.$api.QueryParamsBySequence(this.sequence).then((res) => {
          // console.log(res.Data); 
          this.data = res.Data;
        }).catch((err) => {
          if (err) {
            this.$Message.error(err);
          }
        });
      },
      updateBtnClickedHandler () {
        this.$api.UpdateImsSequenceParams(this.data).then((res) => {
          this.$Message.success('操作成功');
          // this.getAll();
          this.goback();
        }).catch((err) => {
          if (err) {
            this.$Message.error(err);
          }
        });
      },
      goback () {
        this.$router.push({
          name: this.nav.back
        });
      }
    },
    mounted () {
      if (this.sequence) {
        // console.log(this.sequence);
        this.getAll();
      } else {
        // this.sequence = {}
        this.$Message.info('参数异常，返回上一页！');
        this.goback();
      }
    }
  };
</script>

<style scoped>
.setparams {
  text-align: left;
}
.title {
  font-size: 14px;
  line-height: 2em;
  padding: 5px 0; 
  color: #a5a5a5;
}
.label {
  font-size: 14px;
  line-height: 2em;
  color: #101010;
}
.remark {
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
</style>